<template>
    <button :class="btnclass" @click="myclick">{{btntext}}<!--按钮-->
      <slot name="btn"></slot><!--插槽-->
    </button>
</template>

<script>
    export default {
        name: "buttons",
        data:function () {
          return {}
        },
      methods:{
        myclick(){
          this.$emit('btnclick')//自定义点击按钮时触发事件
        }
      },
      props:{
          btntext:{
            type:String,
            default:'默认按钮'
          },
          btnclass:''
      }
    }
</script>

<style scoped>
  .add{
    width: 60px;
    height: 20px;
    line-height:20px;
    text-align: center;
    background-color: #409dfe;
    color: #f0f0f0;
    border:none;
    margin: 5px;
    border-radius: 3px;
    cursor: pointer;
  }
  .del{
    width: 60px;
    height: 20px;
    line-height:20px;
    text-align: center;
    background-color: #f46c6c;
    color: #f0f0f0;
    border:none;
    margin:5px;
    border-radius: 3px;
    cursor: pointer;
  }
  .change{
    width: 60px;
    height: 20px;
    line-height:20px;
    text-align: center;
    background-color: #409dfe;
    color: #f0f0f0;
    border:none;
    margin:5px;
    border-radius: 3px;
    cursor: pointer;
  }
  .refer{
    width: 60px;
    height: 20px;
    line-height:20px;
    text-align: center;
    background-color: #67c13a;
    color: #f0f0f0;
    border:none;
    margin:5px;
    border-radius: 3px;
    cursor: pointer;
  }
  .derive{
    width: 110px;
    height: 20px;
    line-height:20px;
    text-align: center;
    background-color: #67c13a;
    color: #f0f0f0;
    border:none;
    margin:5px;
    border-radius: 3px;
    cursor: pointer;
  }
</style>
